body {
    background-color: #E8E8E8;
    line-height: 1.15;
}

.swiper{
    width: 100%;
    height: 95px;
    position: relative;
    overflow: hidden;
    .swiper-bg1{
        background-image: url("../../assets/imgs/dj.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .swiper-bg2{
        background-image: url("../../assets/imgs/dj3.webp");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
    .swiper-bg3{
        background-image: url("../../assets/imgs/dj2.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}

.user {
    width: 100%;
    padding: 20px;
    position: relative;

    .user-head {
        justify-content: space-between;
        align-items: center;
        #headUser {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            border: 2px solid #4294FF;
            background-color: #E8E8E8;
        }

        span {
            color: #8A8A8A;
            font-size: 32px;
            margin-left: 120px;
        }
    }

    .autograph {
        margin-top: 16px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    img {
        top: 94px;
        left: 96px;
        width: 35px;
    }
}

.clock {
    margin-top: 20px;
    width: 100%;
    justify-content: space-between;

    .clock-left {
        align-items: center;

        img {
            width: 20px;
            height: 20px;
            margin-right: 6px;
        }

        span {
            font-weight: bold;
            font-size: 26px;
            margin: 0 5px;
        }
    }

    .clock-right {
        line-height: 40px;
        width: 100px;
        height: 40px;
        background-color: #4294FF;
        font-weight: bold;
        border-radius: 30px;
    }
}

.dynamic {
    margin-top: 20px;
    width: 100%;
    justify-content: space-between;

    .dynamic-left {
        align-items: center;

        img {
            width: 20px;
            margin-right: 6px;
        }

        span {
            font-weight: bold;
            font-size: 26px;
            margin: 0 5px;
        }
    }

    .dynamic-right {
        align-items: center;

        span {
            font-size: 32px;
        }
    }
}

.motion-data {
    flex-direction: column;
    margin-top: 20px;

    .motion {
        padding-bottom: 20px;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;

        .motion-left {
            align-items: center;
            img {
                width: 20px;
                margin-right: 6px;
            }

            span {
                font-weight: bold;
                font-size: 26px;
                margin: 0 5px;
            }
        }

        .motion-right {
            align-items: center;

            span {
                font-size: 32px;
            }
        }
    }

    .motion-bottom {
        justify-content: space-around;
        .data-left {
            padding-left: 10px;
            width: 50%;
            >span {
                display: inline-block;
                margin-bottom: 18px;
            }

            div {
                font-size: 14px;

                span {
                    font-size: 30px;
                }
            }
        }

        .data-right {
            border-left: 1px dashed #bbb;
            width: 50%;
            padding-left: 10px;
            >span {
                display: inline-block;
                margin-bottom: 18px;
            }

            div {
                font-size: 14px;

                span {
                    font-size: 30px;
                }
            }
        }
    }
}

// 徽章
.badge-data {
    flex-direction: column;
    margin-top: 20px;
    margin-bottom: 72px;
    .badge {
        padding-bottom: 20px;
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;

        .badge-left {
            align-items: center;
            position: relative;
            i{
                top: 10px;
                left: 4px;
            }
            img {
                width: 20px;
                margin-right: 6px;
            }

            span {
                font-weight: bold;
                font-size: 26px;
                margin: 0 5px;
            }
        }

        .badge-right {
            align-items: center;

            span {
                font-size: 32px;
            }
        }
    }
    .badge-bottom{
        justify-content: space-between;
    }
}